import { Row, Col, Menu } from 'antd'
import { HomeOutlined, EditOutlined, SmileOutlined } from '@ant-design/icons'
import '../public/styles/component/header.css'
import Router from 'next/router'

const Header = (props) => {
  return (
    <div className="header">
      <Row type="flex" justify="center">
        <Col className="web-name" xs={24} sm={24} md={10} lg={12} xl={12}>
          <span className="header-logo">老王</span>
          <span className="header-txt">的前端成长记录</span>
        </Col>
        <Col className="memu-div" xs={0} sm={0} md={14} lg={8} xl={6}>
          <Menu mode="horizontal" selectedKeys={[props.path]} onClick={(e) => { Router.push(e.key) }}>
            <Menu.Item key="/">
              <HomeOutlined />
              首页
            </Menu.Item>
            <Menu.Item key="/list">
              <EditOutlined />
              博文
            </Menu.Item>
            <Menu.Item key="/life">
              <SmileOutlined />
              生活
            </Menu.Item>
          </Menu>
        </Col>
      </Row>
    </div>
  )

}
export default Header